<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-iframe和a标签.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .abc {
        background-color: salmon;
      }
    </style>
  </head>
  <body>
    <!-- 
      页面嵌套页面的效果  01 页面看成是 父页面   02 子页面 
     iframe 
     1 src 指定被嵌套的页面 
     2 父子页面 静态资源 不共享
      1 在父页面中定义了样式  .nav 
      2 子页面 不可能拿到这个样式 

    3 iframe 和a标签搭配  
      点击a标签，让 iframe标签的内容切换 
      1 iframe标签 添加一个属性 name 
      2 a标签 target = iframe name属性 
     -->

    <!-- <h1>父页面</h1>
     <iframe src="./02-son.html" frameborder="0"></iframe>
     <h1>父页面</h1>
     <script>
       let a=100;
     </script> -->

    <a href="./02-son.html" target="view">02</a>
    <a href="./03-.html" target="view">03</a>
    <a href="./04-.html" target="view">04</a>

    <iframe src="./02-son.html" name="view" frameborder="0"></iframe>
    <!-- <script>
      setTimeout(() => {
        location.href = './04-.html';
      }, 3000);
    </script> -->
  </body>
</html>
